<template>
    <view style="height: 100%">
        <ul class="db bgcf pd015">
            <li class="df ac sb h48 bbf1">
                <p class="f14 c28">联系人</p>
                <input class="tr f14 c28 f1" :value="username" @input="onInput" :data-type="0" type="text" placeholder-class="cc" placeholder="请填写联系人姓名" />
            </li>
            <li class="df ac sb h48 bbf1">
                <p class="f14 c28">手机号</p>
                <input class="tr f14 c28 f1" :value="mobile" @input="onInput" :data-type="1" type="number" placeholder-class="cc" placeholder="请填写联系人手机号" />
            </li>
            <li class="df ac sb h48 bbf1" @tap.native="showPopup">
                <p class="f14 c28">省市区</p>
                <input class="tr f14 c28 f1" :value="area[0] + area[1] + area[2]" type="text" disabled placeholder-class="cc" placeholder="请选择" />
                <image class="img14 ml8" src="https://wx.xtwaixie.com/img/more1.png" />
            </li>

            <li class="df pd150">
                <p class="f14 c28">详细地址</p>
                <textarea
                    class="f1 tr f14 c28 h38 ml15"
                    :value="address"
                    @input="onInput"
                    :data-type="2"
                    placeholder="请填写详细地址，具体到门牌号"
                    placeholder-class="cc"
                ></textarea>
            </li>
        </ul>

        <ul class="db bgcf pd015 mt10">
            <li class="df ac sb h48 bbf1">
                <p class="f14 c28">开票信息</p>
                <view class="df ac">
                    <p :class="'tag3 ' + (act == 1 ? 'tag3-act' : '')" @tap.native="onAct($event, { act: 1 })" :data-act="1">专票</p>
                    <p :class="'tag3 ml8 ' + (act == 2 ? 'tag3-act' : '')" @tap.native="onAct($event, { act: 2 })" :data-act="2">普票</p>
                </view>
            </li>
            <li class="df ac sb h48 bbf1" v-if="act != 0">
                <p class="f14 c28">公司名称</p>
                <input class="tr f14 c28 f1" :value="company" @input="onInput" :data-type="3" type="text" placeholder-class="cc" placeholder="请填写公司名称" />
            </li>
            <view v-if="act == 1">
                <li class="df ac sb h48 bbf1">
                    <p class="f14 c28">税号</p>
                    <input class="tr f14 c28 f1" :value="tax_number" @input="onInput" :data-type="4" type="text" placeholder-class="cc" placeholder="请填写税号" />
                </li>
                <li class="df ac sb h48 bbf1">
                    <p class="f14 c28">开户行</p>
                    <input class="tr f14 c28 f1" :value="bank" @input="onInput" :data-type="5" type="text" placeholder-class="cc" placeholder="请填写开户行" />
                </li>
                <li class="df ac sb h48 bbf1">
                    <p class="f14 c28">账号</p>
                    <input class="tr f14 c28 f1" :value="account" @input="onInput" :data-type="6" type="text" placeholder-class="cc" placeholder="请填写账号" />
                </li>
                <li class="df ac sb h48 bbf1">
                    <p class="f14 c28">开户行地址</p>
                    <input class="tr f14 c28 f1 ml15" :value="bank_address" @input="onInput" :data-type="7" type="text" placeholder-class="cc" placeholder="请填写开户行地址" />
                </li>
                <li class="df ac sb h48 bbf1">
                    <p class="f14 c28">电话</p>
                    <input class="tr f14 c28 f1 ml15" :value="invoice_mobile" @input="onInput" :data-type="8" type="text" placeholder-class="cc" placeholder="请填写电话" />
                </li>
            </view>
            <li class="df ac sb h48 bbf1" v-if="act == 2">
                <p class="f14 c28">纳税人识别号</p>
                <input class="tr f14 c28 f1 ml15" :value="taxpayer_number" @input="onInput" :data-type="9" type="text" placeholder-class="cc" placeholder="请填写纳税人识别号" />
            </li>

            <li class="df ac h48">
                <van-checkbox :value="is_check" @change="onChange" icon-size="18px">
                    <p class="f14 c28">默认地址</p>
                </van-checkbox>
            </li>
        </ul>

        <view class="pd15 mt15">
            <button class="sub" @tap="onSub" v-if="id == 0">保存</button>
            <view class="df ac sb" v-else>
                <button class="sub w45 bgcff" @tap="onDel">删除</button>
                <button class="sub w45" @tap="onSub">保存</button>
            </view>
        </view>

        <van-popup :show="show" round @close="onClose" position="bottom">
            <van-area :area-list="areaList" @confirm="confirm" @cancel="onClose" />
        </van-popup>
    </view>
</template>

<script>
const http = require('../../utils/http');
import areaList from '../../utils/area';
export default {
    data() {
        return {
            id: '',
            act: 0,
            areaList: areaList.areaList,
            show: false,
            area: ['', '', ''],
            username: '',
            mobile: '',
            address: '',
            company: '',
            tax_number: '',
            bank: '',
            account: '',
            bank_address: '',
            invoice_mobile: '',
            taxpayer_number: '',
            is_check: false
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.id = options.id;
        if (options.id != 0) {
            this.getInfo();
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        onChange(event) {
            this.is_check = event.detail
        },

        onSub() {
            if (this.act == 0) {
                uni.showToast({
                    title: '请选择发票类型',
                    icon: 'none'
                });
                return false;
            }
            let data = {
                username: this.username,
                mobile: this.mobile,
                province: this.area[0],
                city: this.area[1],
                area: this.area[2],
                address: this.address,
                invoice_type: this.act,
                company: this.company,
                tax_number: this.tax_number,
                bank: this.bank,
                account: this.account,
                bank_address: this.bank_address,
                invoice_mobile: this.invoice_mobile,
                taxpayer_number: this.taxpayer_number,
                is_check: this.is_check ? 1 : 0,
                id: this.id == 0 ? '' : this.id
            };
            http.request('address/adAddress', data)
                .then((res) => {
                    uni.showToast({
                        title: '保存成功'
                    });
                    setTimeout(() => {
                        uni.navigateBack({
                            delta: 1
                        });
                    }, 1500);
                })
                .catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    });
                });
        },

        onDel() {
            http.request('address/delAddress', {
                id: this.id
            })
                .then((res) => {
                    uni.showToast({
                        title: res.message
                    });
                    setTimeout(() => {
                        uni.navigateBack({
                            delta: 1
                        });
                    }, 1500);
                })
                .catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    });
                });
        },

        //  获取信息
        getInfo() {
            http.request('Address/addInfo', {
                id: this.id
            })
                .then((res) => {
                    let info = res.data;
                    this.setData({
                        username: info.username,
                        mobile: info.mobile,
                        [`area[0]`]: info.province,
                        [`area[1]`]: info.city,
                        [`area[2]`]: info.area,
                        address: info.address,
                        act: info.invoice_type,
                        company: info.company,
                        tax_number: info.tax_number,
                        bank: info.bank,
                        account: info.account,
                        bank_address: info.bank_address,
                        invoice_mobile: info.invoice_mobile,
                        taxpayer_number: info.taxpayer_number,
                        is_check: info.check == 1 ? true : false
                    });
                })
                .catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    });
                });
        },

        onInput(e) {
            let val = e.detail.value;
            let type = e.currentTarget.dataset.type;
            switch (type) {
                case 0:
                    this.setData({
                        username: val
                    });
                    break;
                case 1:
                    this.setData({
                        mobile: val
                    });
                    break;
                case 2:
                    this.setData({
                        address: val
                    });
                    break;
                case 3:
                    this.setData({
                        company: val
                    });
                    break;
                case 4:
                    this.setData({
                        tax_number: val
                    });
                    break;
                case 5:
                    this.setData({
                        bank: val
                    });
                    break;
                case 6:
                    this.setData({
                        account: val
                    });
                    break;
                case 7:
                    this.setData({
                        bank_address: val
                    });
                    break;
                case 8:
                    this.setData({
                        invoice_mobile: val
                    });
                    break;
                case 9:
                    this.setData({
                        taxpayer_number: val
                    });
                    break;
            }
        },

        onAct(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            let act = e.currentTarget.dataset.act;
            this.setData({
                act: act
            });
        },

        confirm(e) {
            this.setData({
                [`area[0]`]: e.detail.values[0].name,
                [`area[1]`]: e.detail.values[1].name,
                [`area[2]`]: e.detail.values[2].name,
                show: false
            });
        },

        onClose() {
            this.setData({
                show: false
            });
        },

        showPopup() {
            this.setData({
                show: true
            });
        }
    }
};
</script>
<style>
@import './address.css';
</style>
